<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.custom {
  display: flex;
}

</style>
<template>
  <Card>
    <div>
      <Row style="text-align:left;padding:10px 0;">
        <Col span="12">
        <Input v-model="queryStr" placeholder="类型/品牌/测能类型">
        <Button slot="append" icon="ios-search" type="info" @click.native="query(queryStr)"></Button>
        </Input>
        </Col>
        <Col span="12" style="text-align:right;">
        <Button type="success" icon="android-add-circle" @click="add()">新增</Button>
        </Col>
      </Row>
      <Table :loading="spinShow" border :columns="columns7" :data="tableList"></Table>
      <Row style="text-align:right;padding:10px 0;">
        <Page :total="pageObj.total" size="small" show-elevator :page-size="pageObj.size" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
      </Row>
      <Modal v-model="aeModal.show" :title="aeModal.title" width="1300" height="1440" @on-cancel="cancel" @on-ok="ok" :scrollable="true">
        <Tabs :value="showTabPanel" type="card" @on-click="TabsClick">
          <TabPane name="oneTab" label="设备信息">
            <!-- style="max-height:400px;overflow-y:scroll;" -->
            <DeviceInfoForm ref="refDeviceInfoForm" @showTab="showTab" @saveSubmitReady="saveSubmitReady" @updSubmitReady="updSubmitReady"></DeviceInfoForm>
          </TabPane>
          <TabPane name="twoTab" label="采集项">
            <CollectionForm ref="refDeviceColForm" @showTab="showTab" @saveSubmitReady="saveSubmitReady" @updSubmitReady="updSubmitReady"></CollectionForm>
          </TabPane>
        </Tabs>
        <div slot="footer" style="text-align: center;">
          <div v-show="showTabPanel=='oneTab'">
            <Button type="primary" @click="handleSubmit()">提交</Button>
            <Button type="primary" ghost @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </div>
          <div v-show="showTabPanel=='twoTab'">
            <Button type="info" @click.native="handleSubmit">提交</Button>
            <Button type="success" @click.native="addOne">增加</Button>
          </div>
        </div>
      </Modal>
    </div>
  </Card>
</template>
<script>
// 1.先使用import导入你要在该组件中使用的子组件
import DeviceInfoForm from '../type/DeviceInfoForm.vue'
import CollectionForm from '../type/CollectionForm.vue'
export default {
  components: { DeviceInfoForm, CollectionForm },
  data: function () {
    return {
      pageObj: { total: 0, size: 20, index: 0 },
      childObj: {},
      showTabPanel: 'oneTab',
      spinShow: true,
      tableList: [],
      totalElements: 0,
      queryStr: '',
      aeModal: {
        show: false,
        title: '新增'
      },
      columns7: [{
        title: '类型',
        key: 'useType',
        align: 'center'
        /* ,
                  render: (h, params) => {
                    return h('div', [
                      h('Icon', {
                        props: {
                          type: 'person'
                        }
                      }),
                      h('strong', params.row.type)
                    ])
                  } */
      }, {
        title: '型号',
        key: 'model',
        align: 'center'
      }, {
        title: '品牌',
        key: 'brand',
        align: 'center'
      }, {
        title: '读取频率',
        key: 'readInterval',
        align: 'center'
      }, {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.resetModalData()
                  this.aeModal.title = '编辑'
                  sessionStorage.typeDeviceInfo = true
                  sessionStorage.typeDeviceCollection = true
                  this.childObj = JSON.parse(JSON.stringify(params.row))
                  this.modalShow()
                  this.$refs.refDeviceInfoForm.updateFormdata(params.row)
                  this.$refs.refDeviceColForm.updateFormdata(params.row)
                }
              }
            }, '编辑'),
            h('Button', {
              props: {
                type: 'error',
                size: 'small'
              },
              on: {
                click: () => {
                  let self = this
                  let config = {
                    title: '提示',
                    content: '您确定删除吗？',
                    onOk: function () {
                      // self.remove(params.index)
                      self.deleteOne(params.row.id)
                    }
                  }
                  this.$Modal.confirm(config)
                }
              }
            }, '删除')
          ])
        }
      }]
    }
  },
  created: function () {
    let self = this
    self.list()
    self.resetModalData()
  },
  mounted: function () {},
  destroyed: function () {
    let self = this
    self.$Message.destroy()
    self.resetModalData()
  },
  methods: {
    modalShow: function () {
      this.aeModal.show = true
    },
    modalHide: function () {
      this.aeModal.show = false
    },
    remove: function (index) {
      this.tableList.splice(index, 1)
    },
    ok: function () { this.$Message.info('Clicked ok') },
    cancel: function () { this.$Message.info('Clicked cancel') },
    // 数据list
    list: function () {
      let self = this
      let getData = {
        'size': self.pageObj.size,
        'page': self.pageObj.index,
        'searchParam': self.queryStr
      }
      self.spinShow = true
      window.myapi.devType_list(getData).then(function (res) {
        self.tableList = []
        if (res.data.status === 200) {
          self.tableList = res.data.data.content.reverse()
          self.totalElements = res.data.data.totalElements
          self.pageObj.size = res.data.data.size
          self.pageObj.total = res.data.data.totalElements
        } else {
          let msg = res.data.msg ? res.data.msg : '请求数据失败!'
          self.$Message.error({ content: msg, duration: 5, closable: true })
        }
        self.spinShow = false
      }).catch(function (e) {
        self.tableList = []
        let msg = e.response.data.message ? e.response.data.message : '请求数据失败!'
        self.$Message.error({ content: msg, duration: 0, closable: true })
        self.spinShow = false
      })
    },
    // 第几页
    pageChange: function (index) {
      let self = this
      self.pageObj.index = index - 1
      self.list()
    },
    // 每页显示多少
    pageSizeChange: function (index) {
      console.log(index)
    },
    // 删除
    deleteOne: function (id) {
      let self = this
      let arr = []
      arr.push(id)
      let postData = arr
      window.myapi.devType_del(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.error('删除数据成功!')
          self.list()
        } else {
          let msg = res.data.msg ? res.data.msg : '删除数据失败!'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        let msg = e.response.data.message ? e.response.data.message : '删除数据失败!'
        self.$Message.error({ duration: 0, closable: true, content: msg })
      })
    },
    // 查询
    query: function (str) {
      let self = this
      if (str) {
        self.queryStr = str
      } else {
        self.queryStr = ''
      }
      self.pageObj.index = 0
      self.list()
    },
    // deviceInfoModalSuccess
    deviceInfoModalSuccess: function () {
      let self = this
      self.modalHide()
      self.list()
    },
    // 新增弹窗
    add: function () {
      let self = this
      self.aeModal.title = '新增'
      self.modalShow()
      self.resetModalData()
      self.childObj = {}
      self.$refs.refDeviceInfoForm.updateFormdata({})
      self.$refs.refDeviceColForm.updateFormdata({})
    },
    // 新增
    save: function () {
      let self = this
      let postData = self.childObj
      window.myapi.devType_save(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.success('保存成功!')
          self.modalHide()
          self.resetModalData()
          self.query()
        } else {
          let msg = res.data.msg ? res.data.msg : '保存失败！'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        let msg = e.response.data.message ? e.response.data.message : '保存失败!'
        self.$Message.error({ duration: 0, closable: true, content: msg })
      })
    },
    // 修改
    upd: function () {
      let self = this
      let postData = self.childObj
      window.myapi.devType_upd(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.success('保存成功!')
          self.modalHide()
          self.resetModalData()
          self.query()
        } else {
          let msg = res.data.msg ? res.data.msg : '保存失败！'
          self.$Message.error(msg)
        }
      }).catch(function (e) {
        if (e && e.response && e.response.data) {
          let msg = e.response.data.message ? e.response.data.message : '保存失败!'
          self.$Message.error({ duration: 0, closable: true, content: msg })
        }
      })
    },
    // 显示的tab
    showTab: function (chirldData) {
      let self = this
      if (chirldData.objStr) {
        // 存储form里面的数据
        let obj = JSON.parse(chirldData.objStr)
        self.childObj.useType = obj.useType
        self.childObj.model = obj.model
        self.childObj.brand = obj.brand
        self.childObj.readInterval = obj.readInterval
        self.childObj.prol = obj.prol
        if (obj.id !== undefined) {
          self.childObj.id = obj.id
        }
      }
      if (chirldData.arrStr) {
        // 存储form里面的数据
        self.childObj.iotCollItems = JSON.parse(chirldData.arrStr)
        self.childObj.iotCollItems.map((item) => {
          if (item.isGet === 'true' || item.isGet === true) {
            item.isGet = 1
          } else {
            item.isGet = 0
          }
          return item
        })
      }
      self.showTabPanel = chirldData.tab
    },
    // form弹窗
    updSubmitReady: function () {
      let self = this
      self.upd()
    },
    // form弹窗
    saveSubmitReady: function () {
      let self = this
      self.save()
    },
    // 初始化弹窗的数据
    resetModalData: function () {
      let self = this
      self.childObj = {}
      sessionStorage.typeDeviceInfo = ''
      sessionStorage.typeDeviceCollection = ''
    },
    // 弹窗 确定按钮
    handleSubmit: function () {
      console.log(12)
      if (this.showTabPanel === 'oneTab') {
        this.$refs.refDeviceInfoForm.handleSubmit('formValidate')
      }
      if (this.showTabPanel === 'twoTab') {
        this.$refs.refDeviceColForm.handleSubmit()
      }
    },
    // 重置
    handleReset: function () {
      this.$refs.refDeviceInfoForm.handleReset('formValidate')
    },
    // 添加一行数据
    addOne: function () {
      this.$refs.refDeviceColForm.addOne()
    },
    // tabs点击
    TabsClick: function (name) {
      this.showTabPanel = name
    }
  }
}

</script>
